<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>我的订单</title>
	<%@ include file="../lib/vue/vue_common.jsp"%>
	<link rel="stylesheet" href="${ctx}/page/lib/vue/css/mescroll.min.css"/>
	<link rel="stylesheet" href="${ctx}/page/member/css/orders.css?v=${version}"/>
	<script type="text/javascript" src="${ctx}/page/lib/vue/js/mescroll.min.js"></script>
</head>
<body>
	<div id="app">
		<ul class="menu">
			<li :class="sourceType == '0'?'active':''" @click="tab('0')">未支付</li>
			<li :class="sourceType == '1'?'active':''" @click="tab('1')">已支付</li>
			<li :class="sourceType == '2'?'active':''" @click="tab('2')">已发货</li>
			<li :class="sourceType == '4'?'active':''" @click="tab('4')">已退货</li>
		</ul>
		<div class="container" v-cloak>
			<div id="mescroll" class="mescroll">
				<ul class="orderList" id="dataList">
					<li v-for="order in orders" @click="goToOrderDetail(order)">
							<div class="hd">订单号：{{order.orderNo}}
								<span v-if="order.status == '0'" >未支付</span>
								<span v-else-if="order.status == '1'">已支付</span>
								<span v-else-if="order.status == '2'">已发货</span>
								<span v-else-if="order.status == '3'">已取消</span>
								<span v-else-if="order.status == '4'">已退货</span>
							</div>
							<div class="bd" @click="goToDetail(order)">
								<div class="pic">
									<img class="lazy" v-lazy.container="order.imgUrl" />
								</div>
								<p class="name two_line">{{order.name}}</p>
								<p class="sku">数量：{{order.counts}} &nbsp;&nbsp;&nbsp;规格：{{order.skuName}}</p>
								<p class="sku">价格：{{order.productPrice | fixed2}}&nbsp;贝币</p>
							</div>
							<div class="ft">运费：{{order.freightAmount}}&nbsp;贝币<b>总金额：<i>{{order.payAmount|fixed2}}&nbsp;贝币</i></b></div>
							<span v-if="order.status == '2'"><div class="yd">{{order.freightName}}：{{order.freightNo}}</div></span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		Vue.use(VueLazyload, {
			preLoad: 1.3,
			error: '${ctx}/page/lib/vue/img/1-1.png',
			loading: '${ctx}/page/lib/vue/img/1-1.png',
			attempt: 1
		});
		var app = new Vue({
			el: '#app',
			data: {
				orders:null,
				mescroll:null,
				sourceType:"0"
			},
			watch:{
			},
			methods: {
				goToDetail:function(order){
					window.location.href=order.detailUrl;
				},
				goPay:function(order){
					window.location.href=mServerUrl+"/page/confirmProductOrderView.htm?orderNo="+order.orderNo;
				},
				goToOrderDetail:function(order){
					window.location.href=mServerUrl+"/page/productOrderDetailView.htm?orderNo="+order.orderNo;
				},
				upCallback: function(page) {
					var self = this;
					getListDataFromNet(page.num, page.size,self.sourceType, function(data) {
						if(page.num == 1) self.orders = [];
						self.orders = self.orders.concat(data);
						self.mescroll.endSuccess(data.length);
					}, function() {
						self.mescroll.endErr();
					});
				},
				tab:function(sourceType){
					if(this.sourceType == sourceType){
						return;
					}
					this.sourceType = sourceType;
					this.mescroll.resetUpScroll();
				}
			},
			mounted: function(){
				var self = this;
				self.mescroll = new MeScroll("mescroll", {
					down: {
						auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					},
					up: {
						auto: true, 
						callback: self.upCallback, //上拉回调
						page:{size:20},
						empty:{ //配置列表无任何数据的提示
							warpId:"dataList",
						  	tip : "亲,暂无相关数据哦~" , 
						}
					},
				});
			}
		});
		function getListDataFromNet(pageNum,pageSize,sourceType,successCallback,errorCallback) {
          	axios.get("getOrdersData.do", {
				params: {
					pageIndex: pageNum, //页码
					pageSize: pageSize, //每页长度
					sourceType:sourceType
				}
			}).then(function(response) {
               	successCallback&&successCallback(response.data.items);//成功回调
			}).catch(function(error) {
				errorCallback&&errorCallback()//失败回调
			});
		}
	</script>
</body>
</html>